<template>
	<view class="page">
		<status-bar></status-bar>
		<!-- 头部 -->
		<view class="head-wrapper">
			<view class="search-wrapper">
				<view class="icon iconfont icon-fanhui u-f-ajc" @tap="back"></view>
				<input type="text" confirm-type="search" :focus="focus" @confirm="search" class="search-input" placeholder="搜索拍品"
				 placeholder-style="color: #FFF;" v-model="keyWord" />
				<image src="/static/icon/search.png" class="search-icon" @tap="search"></image>
			</view>
		</view>
		<view v-if="hasData" class="card-wrapper">
			<!-- 拍品卡片 -->
			<ap-card v-for="(item, index) in lotCards" :key="index" :cardValue="item" class="card" @tapCard="click(item.lotId)"></ap-card>
			<cl-loadmore v-if="lotCards.length >= 2" background-color="#fff" :loading="loading" :finish="finish">没有更多了</cl-loadmore>
		</view>
		<view v-else class="tip-wrapper">
			<text>没有找到相关拍卖，请换个关键词</text>
		</view>
		<cl-loading-mask :loading="maskLoading" text="数据加载中" color="#2196F3" fullscreen></cl-loading-mask>
	</view>
</template>

<script>
	/*引入手机状态栏留空组件*/
	import statusBar from "@/components/status-bar/status-bar.vue"
	// 拍品卡片
	import apCard from "@/components/ap-card/ap-card.vue";
	export default {
		components: {
			statusBar,
			apCard
		},
		data() {
			return {
				hasData: true,
				keyWord: '',
				lotCards: [],
				lastCardId: 0,
				focus: null,
				loading: false,
				finish: false,
				maskLoading: false
			}
		},
		methods: {
			back() {
				var pages = getCurrentPages(); // 当前页面
				if (pages.length <= 1) {
					uni.switchTab({
						url: "../index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			click(lotId) {
				uni.navigateTo({
					url: "/pages/lotDetail/lotDetail?lotId=" + lotId
				})
			},
			// 搜索
			search() {
				if (!this.maskLoading) {
					this.maskLoading = true;
				}
				setTimeout(() => {
					this.lotCards = [];
					this.requestUrl(this.$serverUrl + "search?keyWord=" + this.keyWord + "&pageSize=8");
				}, 500)
			},
			// 请求网络（特殊），获取对应tab下的内容
			requestUrl(url) {
				uni.request({
					url: url,
					method: "GET",
					success: (res) => {
						if (this.checkSucess(res)) {
							// 没有内容更改状态
							if (res.data.data.length == 0) {
								this.goNoMore()
								if (this.lotCards.length <= 0) {
									this.hasData = false;
								}
								uni.stopPullDownRefresh();
								this.maskLoading = false;
								return;
							}
							this.handleLotImages(res);
							this.handlePhoto(res);
							// 将数据加载到对应位置，并记录最后一条的lotId
							this.lotCards = this.lotCards.concat(res.data.data);
							this.lastCardId = this.lotCards[this.lotCards.length - 1].lotId;
							this.hasData = true;
							this.maskLoading = false;
							uni.stopPullDownRefresh();
							this.goStart()
						} else {

						}
					}
				})
			},
			// 加载更多
			loadMore() {
				this.goLoading()
				setTimeout(() => {
					this.requestUrl(this.$serverUrl + "search?keyWord=" + this.keyWord + "&lastLotId=" + this.lastCardId +
						"&pageSize=8");
				}, 500)
			},
			// 网络请求是否成功的判断
			checkSucess(res) {
				let isSuccess = false;
				if (res.data.statusCode == "200") {
					if (res.data.msg == "success") {
						isSuccess = true;
					}
				}
				return isSuccess;
			},
			// 处理头像
			handlePhoto(res) {
				let data = res.data.data;
				for (let i = 0; i < data.length; i++) {
					let photo = data[i].photo;
					if (photo == null || photo == "") {
						res.data.data[i].photo = "/static/icon/head-icon.jpg";
						continue;
					}
					res.data.data[i].photo = "http://localhost:8081/photo/" + photo;
				}
			},
			handleLotImages(res) {
				// 处理图片地址
				for (let j = 0; j < res.data.data.length; j++) {
					if (res.data.data[j].images != null) {
						let image = res.data.data[j].images.split("?");
						for (let i = 0; i < image.length; i++) {
							image[i] = "http://localhost:8081/image/" + res.data.data[j].lotId + "/" + image[i];
						}
						res.data.data[j].images = image;
					}
				}
			},
			goStart() {
				this.loading = false;
				this.finish = false;
			},
			goLoading() {
				this.loading = true;
			},
			goNoMore() {
				this.finish = true;
			}
		},
		onLoad() {
			// 设置输入框焦点
			setTimeout(() => {
				this.focus = true;
			}, 0)
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.lotCards = [];
				this.requestUrl(this.$serverUrl + "search?keyWord=" + this.keyWord + "&pageSize=8");
			}, 500)
		},
		// 触底事件
		onReachBottom() {
			if (!this.hasData) {
				return;
			}
			if (this.lotCards.length < 2) {
				return;
			}
			this.goStart();
			this.loadMore();
		},
		onBackPress() {
			if (getCurrentPages().length <= 1) {
				uni.switchTab({
					url: "../index/index"
				})
				return true;
			}
		}
	}
</script>

<style>
	@import url("search.css");

	/deep/ .cl-divider__text {
		background-color: #F2F1F6 !important;
	}
</style>
